<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>社区广场</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="../css/icons-extra.css" />
		<script src="../js/flexible.js" type="text/javascript" charset="utf-8"></script>
		<style>
			html,
			body {
				background: #fff;
			}
			
			ul,
			ol {
				list-style: none;
			}
			
			body input[type='text'],
			ul,
			li,
			input[type='password'] {
				padding: 0;
				margin: 0;
				border: 0;
				border-radius: 0;
			}
			
			:-moz-placeholder {
				/* Mozilla Firefox 4 to 18 */
				color: #fff;
				opacity: 1;
			}
			
			::-moz-placeholder {
				/* Mozilla Firefox 19+ */
				color: #fff;
				opacity: 1;
			}
			
			.mui-bar-nav {
				border-bottom: 1px solid #dcdcdc;
			}
			
			.mui-bar-nav .icon_r {
				display: flex;
				align-items: center;
				height: inherit;
			}
			
			.mui-bar-nav .icon_r img {
				width: 0.533rem;
				height: 0.533rem;
				display: block;
			}
			
			input:-ms-input-placeholder {
				color: #fff;
				opacity: 1;
			}
			
			p {
				margin: 0;
				line-height: normal;
			}
			
			input::-webkit-input-placeholder {
				color: #fff;
				opacity: 1;
			}
			
			.clear {
				clear: both;
				height: 0;
				font-size: 0;
				line-height: 0;
				visibility: hidden;
				overflow: hidden;
			}
			
			.mui-bar-tab .mui-tab-item.mui-active {
				color: #888888;
			}
			
			.nav-active span {
				color: #1c83fc;
			}
			/*顶部*/
			/*登录表单*/
			
			.sqgc_view {
				background: #fff;
			}
			
			.sqgc_view ul li {
				padding: 0.4rem 0.4rem 0 0.4rem;
				display: flex;
				justify-content: space-between;
			}
			
			.sqgc_view .l {}
			
			.sqgc_view .l img {
				width: 1.173rem;
				height: 1.173rem;
				display: block;
			}
			
			.sqgc_view .r {
				width: 7.8rem;
			}
			
			.sqgc_view .r .t1 {
				font-size: 0.426rem;
				color: #1c83fc;
			}
			
			.sqgc_view .r .t2 {
				font-size: 14px;
				color: #353535;
				margin: 0.1rem 0;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}
			
			.sqgc_view .r .img {
				justify-content: space-between;
			}
			
			.sqgc_view .r .img img {
				width: 2.48rem;
				height: 2.48rem;
				display: inline-block;
				margin-right: 0.06rem;
			}
			
			.sqgc_view .r .bottom {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 0.6rem;
			}
			
			.sqgc_view .r .bottom .time {
				color: #888888;
				font-size: 0.32rem;
			}
			
			.sqgc_view .r .bottom .like i {
				font-size: 0.32rem;
				margin-right: 0.1rem;
			}
		</style>
		<link rel="stylesheet" type="text/css" href="../css/pre_image.css"/>
	</head>

	<body>
		<!--顶部-->
		<!--@click="go_page('sqgc_form.html')"-->
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">社区广场</h1>
			<a  onclick=" app.go_page('sqgc_form.html')" class="mui-pull-right icon_r"><img src="../images/sqgc_nav.png" /></a>
		</header>
		<div class="mui-content sqgc_view">
			<ul>

				<li v-for="(item,k) in list" class="sqgc_li">
					<div class="l">
						<img :src="item.user_img" />
					</div>
					<div class="r">
						<p class="t1" v-html="item.user_name"></p>
						<p class="t2" v-html="item.info" :style="item.open_info==true?'-webkit-line-clamp: inherit;':'-webkit-line-clamp: 2;'"></p>
						
						<p class="t2" style="text-align: right;" v-show="item.info.length>=40" @click="open_info(k)" v-html="item.open_info==true?close_info_status:open_info_status"></p>
						 
						<div class="img">
							<img :src="img" data-preview-src="" :data-preview-group="k" v-for="(img,k2) in item.imgs" />
						</div>
						<div class="bottom">
							<p class="time" v-html="item.time"></p>
							<p class="like" @click="dianzan(k)"><i class="mui-icon-extra mui-icon-extra-like" :style="{color:item.style==0?'':'#1c83fc'}"></i><span v-html="item.zan"></span></p>
						</div>
					</div>
				</li>

			</ul>
		</div>
		<nav class="mui-bar mui-bar-tab nav-bar-index">
			<a class="mui-tab-item" href="index.html">
				<span class="mui-icon">
					<img src="../images/index-01.png"/>
				</span>
				<span class="mui-tab-label">社区首页</span>
			</a>
			<a class="mui-tab-item nav-active" href="sqgc_list.html">
				<span class="mui-icon">
					<img src="../images/index-02-hove.png"/>
				</span>
				<span class="mui-tab-label">社区广场</span>
			</a>
			<a class="mui-tab-item" href="shop_home.html">
				<span class="mui-icon">
					<img src="../images/index-03.png"/>
				</span>
				<span class="mui-tab-label">社区商城</span>
			</a>
			<a class="mui-tab-item" href="my.html">
				<span class="mui-icon">
					<img src="../images/index-04.png"/>
				</span>
				<span class="mui-tab-label">我的</span>
			</a>
		</nav>
		<div id="footer"></div>
	</body>

</html>
<script src="../js/mui.min.js"></script>
<script src="../js/js.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/tools/util.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/mui.zoom.js"></script>
	<script src="../js/mui.previewimage.js"></script>
<script type="text/javascript" charset="utf-8">
	var address = Storage.get('address');
	Vue.filter("to_date", function(n) {
		return util.date_format(n * 1000)
	})
	if(Storage.get('user') != null) {
		var uid = Storage.get('user').uid
		var bid = Storage.get('user').bid
		var sqid = Storage.get('address').sqid
	}
	var app = new Vue({
		el: '.mui-content',
		data: {
			list: "",
			zan_color: 'color:#1c83fc',
			no_zan_color: '#ff4455',
			open_info_status:'展开 <i class="mui-icon mui-icon-arrowdown"></i>',
			close_info_status:'收起 <i class="mui-icon mui-icon-arrowup"></i>'
		},
		methods: {
			
			dianzan: function(o) {
				var that = this;
				console.log(that.list[o].coid)
				if(Storage.get('user') != null) {
					mui.post(url + 'api/system/comment_zan', {
						coid: that.list[o].coid,
						uid: uid,
						sqid: sqid
					}, function(data) {
						//console.log(data)
						if(data == 0) {
							app.list[o].style = 0
							console.log(app.list[o].style)
							mui.toast('点赞取消', {
								duration: 'long',
								type: 'div'
							})
							app.list[o].zan = app.list[o].zan-1
						} else {
							app.list[o].style = 1
							console.log(app.list[o].style)
							mui.toast('点赞成功', {
								duration: 'long',
								type: 'div'
							})
							app.list[o].zan = app.list[o].zan+1
						}
					}, 'json')
				}else{
					mui.toast('未登录，请先登录', {duration: 'long',type: 'div'})
				}
				
			},
			get_data: function() {
				var that = this;
				//                此处ajax请求数据
				//console.log(bid,'--------------')
				mui.get(url + 'api/system/comment_news', {
					sqid: address.sqid,
					uid: uid
				}, function(data) {

					var data = JSON.parse(data).data
					console.log(data)
					console.log("VVVVV")
					if (data == undefined || data == null || data == '') {
						mui.toast('暂无社区广场信息', {
							duration: 'long',
							type: 'div'
						})
					} else{
						for(var i = 0; i < data.length; i++) {
							if(data[i].imgs) {
								data[i].imgs = JSON.parse(data[i].imgs)
							}
						}
						 
					that.list = data;
					}
					
				}, 'json')
			},
			go_page:function(path){
				console.log(path)
				mui.openWindow({
					url:path
				})
			},
			// 展开 更多内容
			open_info:function(k){
				console.log(k)
				if(this.list[k].open_info){
					//打开状态  关闭操作
					Vue.set(this.list[k], "open_info", false)
				}else{
					//关闭状态 打开操作
					Vue.set(this.list[k], "open_info", true)
					
				}
			}
		},
		mounted: function() {
			mui_init(); //MUI初始化
			this.get_data();
			mui.plusReady(function(){
				setTimeout(function() {
				console.log('开始清离后台多余页面')
				var curr = plus.webview.currentWebview();
				var wvs = plus.webview.all();
				for(var i = 0, len = wvs.length; i < len; i++) {
					//关闭其他页面
					if(wvs[i].getURL() == curr.getURL() || wvs[i].getURL().match("shop_list_class"))
						continue;
					plus.webview.close(wvs[i], 'none');
					console.log('关闭了:' + wvs[i].getURL())
				}
			}, 1000)
			})
			
			mui.previewImage();
			
		}
	})

	function dianzan(that) {

	}

	function mui_init() {
		//mui初始化
		mui.init({
			swipeBack: false,
			beforeback: function() { //监听物理返回按键的方法
				console.log('触发了  返回键')　　　　　　
				mui.openWindow({
					url: 'index.html',
					id: 'idnex.html',
					show: {
						autoShow: true, //页面loaded事件发生后自动显示，默认为true
						aniShow: "slide-in-left", //页面显示动画，默认为”slide-in-right“；

					},
				});
				return false;
			}
		});
		mui('.mui-bar-tab').on('tap', '.mui-tab-item', function() {
			console.log(this.href)
			mui.openWindow(this.href, this.href)
		})
		//      mui.plusReady(function() {
		//          var originalHeight = document.documentElement.clientHeight || document.body.clientHeight; //获取原始窗口的高度
		//          window.onresize = function() {
		//              var resizeHeight = document.documentElement.clientHeight || document.body.clientHeight; //软键盘弹起与隐藏  都会引起窗口的高度发生变化
		//              if(resizeHeight * 1 < originalHeight * 1) { //resizeHeight<originalHeight  证明窗口被挤压了
		//                  plus.webview.currentWebview().setStyle({
		//                      height: originalHeight
		//                  });
		//              }
		//          }
		//      });
	}
</script>